<!-- 薪资排行 -->
<template>
	<view class="page"
		:style="'background: url('+baseUrl+'/uploads/20220726/86c0b13435d81b67875e6a109a6fbc4f.png) no-repeat;'">
		<u-navbar title="听课排名" is-fixed
			background="url('https://www.yplm888.com//uploads/20220803/7ed305f9a93ba50b049a7725662b18cc.png') no-repeat">
		</u-navbar>
		<view class="contaier">
			<view class="top_bg">
				<view class="one_box">
					<!-- 第二名 -->
					<view class="top3">
						<view class="num_two">
							<!-- <image class="huangguan2" src="@/static/rank/two.png"></image> -->
							<image class="huangguan2" src="https://www.yplm888.com/uploads/20240204/aff6078bc6ae7fd58458817b40bb828e.png"></image>
							<image class="top3_head" :src="top3[1].user.avatar"></image>
							<!-- <view class="top_name">{{twoName}}</view> -->
							<view class="top_name">{{top3[1].user.nickname}}</view>
							<view class="top_sy">{{top3[1].sum_second}}</view>
						</view>
					</view>

					<!-- 第一名 -->
					<view class="top3">
						<view class="num_one">
							<image class="huangguan1" src="https://www.yplm888.com/uploads/20240204/15a0f98bf596fece70b3d61b0751ef3e.png"></image>
							<image class="top3_head" :src="top3[0].user.avatar"></image>
							<!-- <view class="top_name" style="font-size: 30rpx;">{{oneName}}</view> -->
							<view class="top_name text-bold" style="font-size: 30rpx;">{{top3[0].user.nickname}}</view>
							<view class="top_sy">{{top3[0].sum_second}}</view>
						</view>
					</view>

					<!-- 第三名 -->
					<view class="top3">
						<view class="num_three">
							<image class="huangguan2" src="https://www.yplm888.com/uploads/20240204/d4f3a6686075db2e08d827bec7aeadce.png"></image>
							<image class="top3_head" :src="top3[2].user.avatar"></image>
							<view class="top_name">{{top3[2].user.nickname}}</view>
							<view class="top_sy">{{top3[2].sum_second}}</view>
						</view>
					</view>
				</view>
			</view>
			<scroll-view class="rankList_box" scroll-y="true" :style="'height:' + scrollH+'rpx;'">
				<view class="rankItem" v-for="(item,index) in rankList" :key="index">
					<view class="rankIndex">
						<text>No. {{ index + 1 }}</text>
					</view>
					<view class="HeardBox">
						<image class="image-size" mode="scaleToFill" :src="item.user.avatar"></image>
					</view>

					<view class="NameBox">
						<view class="userName text-bold">{{item.user.nickname}}</view>
					</view>
					<view class="mobile">
						<view style="color: #ccc; font-size: 22rpx;">{{item.user.mobile}}</view>
					</view>
					<view class="download_box">
						{{item.sum_second}}
					</view>
				</view>
			</scroll-view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: this.$u.http.config.baseUrl,
				rankList: [],
				top3: [],
				scrollH:0
			}
		},
		onLoad() {
			this.getList()
		},
		onReady() {
			// this.getnums();
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.scrollH = res.windowHeight * 750 / res.windowWidth;
					// #ifdef MP-WEIXIN
					that.scrollH = res.windowHeight * 750 / res.windowWidth - parseInt(res.safeArea.top) - 600;
					// #endif
				}
			});
		},
		methods: {
			getList() {
				this.$u.api.getPaiming({
					hot_switch: 1
				}).then(res => {
					this.top3 = res.data.topThree
					this.rankList = res.data.topLst
				})
			}
		},
		filters: {

		}
	}
</script>

<style lang="scss" scope>
	.page {
		height: 100% !important;
	}

	.contaier {
		// height: 100%;
	}

	.top_bg {
		width: 750rpx;
		// height: 100%;
		// background: url('~@/static/rank/salaryBg.png') no-repeat;
		background-size: 750rpx 100%;
		position: relative;
	}

	.one_box {
		width: 750rpx;
		height: 260rpx;
		position: absolute;
		left: 0;
		top: 100rpx;
		display: flex;
		justify-content: space-around;
	}

	.one_box .top3 {
		width: 210rpx;
		height: 280rpx;
	}

	.top_name {
		width: 100%;
		height: 55rpx;
		line-height: 60rpx;
		color: #f2f2f2;
		font-size: 26rpx;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.top_sy {
		width: 100%;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 24rpx;
		color: rgba(255, 255, 255, .7);
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.top_sy span {
		font-size: 20rpx !important;
	}

	.num_one {
		position: relative;
	}

	.huangguan1 {
		width: 60px;
		height: 60px;
		position: absolute;
		right: -10rpx;
		top: -100rpx;
	}

	.num_one .top3_head {
		width: 180rpx;
		height: 180rpx;
		border-radius: 100%;
		margin: -36rpx 0 0 20rpx;
		border: 4rpx solid #ffdd3c;
	}

	.num_two {
		position: relative;
	}

	.huangguan2 {
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		right: 15rpx;
	}

	.num_two .top3_head {
		width: 120rpx;
		height: 120rpx;
		border-radius: 100%;
		margin: 45rpx 0 0 45rpx;
		border: 4rpx solid #bcdcdf;
	}

	.num_three {
		position: relative;
	}

	.huangguan2 {
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		right: 15rpx;
	}

	.num_three .top3_head {
		width: 120rpx;
		height: 120rpx;
		border-radius: 100%;
		margin: 45rpx 0 0 45rpx;
		border: 4rpx solid #e29d85;
	}

	// 第二块
	.number_sy_box {
		width: 700rpx;
		height: 210rpx;
		background-color: #FFFFFF;
		position: absolute;
		left: 25rpx;
		border-radius: 20rpx;
		bottom: -115rpx;
		z-index: 999;
		padding: 22rpx;
		box-shadow: 3px 3px 15px 3px rgba(0, 0, 0, 0.1)
	}

	.number_sy_box_title {
		color: #888888;
		// font-weight: 500;
		font-size: 28rpx;
		display: flex;
		z-index: 9999;
		justify-content: space-between;
	}

	.number_sy_main {
		width: 100%;
		height: 124rpx;
		padding-top: 20rpx;
		line-height: 52rpx;
		// background: red;
		display: flex;
		justify-content: space-around;
		position: relative;
	}

	.xiaoding_bg {
		position: absolute;
		right: -22rpx;
		bottom: -30rpx;
		width: 180rpx;
	}

	.number_num1 {
		font-size: 40rpx;
		font-weight: 500;
		color: #2fc04f;
	}

	.number_num2 {
		font-size: 40rpx;
		font-weight: 500;
		color: #4bac7f;
	}

	.danwei {
		height: 60rpx;
		line-height: 60rpx;
		font-size: 26rpx;
		color: #c9c9c9;
	}

	// 列表

	.rankList_box {
		position: absolute;
		background-color: #FFFFFF;
		margin: 20rpx;
		width: 710rpx;
		min-height: 200rpx;
		top: 600rpx;
		border-radius: 40rpx;
		// margin-top: 500rpx;
	}

	.rankItem:last-child {
		border: none;
	}

	.rankItem {
		display: flex;
		align-items: center;
		width: 710rpx;
		height: 150rpx;
		// margin: 0px auto;
		border-bottom: 1px solid #e9e9e9;
		justify-content: space-around;
	}

	.rankIndex {
		width: 60rpx;
		// height: 120rpx;
		// line-height: 120rpx;
		text-align: center;
		color: #CCCCCC;
		font-size: 20rpx;
		// float: left;
	}

	.mobile {
		font-size: 20rpx;
		text-align: center;
		width: 170rpx;
	}

	.HeardBox {
		width: 80rpx;
		height: 80rpx;
		// margin: 20rpx ;
		border-radius: 40rpx;
		// overflow: hidden;
		// float: left;
		// margin-right: 20rpx;
		// margin-left: 10rpx !important;

		.image-size {
			height: 80rpx;
			width: 80rpx;
			border-radius: 40rpx;
		}

	}

	// .HeardBox image {
	// 	width: 100%;
	// 	height: 100%;
	// }

	.NameBox {
		width: 120rpx;
		font-weight: 600;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: center;
		// height: 120rpx;
		// float: left;
		// padding-top: 10rpx;
		// box-sizing: border-box;
	}

	.NameBox view {
		height: 80rpx;
		line-height: 80rpx;
	}

	.userName {
		// min-width: 90rpx;
		font-size: 28rpx;
		// float: left;
		// margin-right: 20rpx;
	}

	.download_box {
		color: #fe466b;
		width: 200rpx;
		font-size: 26rpx;
		line-height: 150rpx;
		// height: 120rpx;
		// background-color: red;
		// float: right;
		// margin-left: 20rpx;

	}
</style>
